import { defineStore } from 'pinia'
import { reqLogin, reqUserInfo } from '../../api/user'
import type { loginForm } from '../../api/user/type'
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '../../utils/token'
//引入路由
import constanRoute from '../../router/routes'
import { UserState } from '../type/type'
import { showroutes, asyncRouter, anyRouter } from '../../router/showmodelrouter'
import router from '../../utils/router'

//引入深拷贝方法
// @ts-ignore  //忽略文件类型
import  cloneDeep  from 'lodash/cloneDeep'


//用户需要展示的异步路由
function filterAsy(asnycRouter: any, routes: any) {
    return asnycRouter.filter((item: any) => {
        //一级路由
        if (routes.includes(item.name)) {
            // 二级路由
            if (item.children && item.children.length > 0) {
                // item.children = JSON.parse(JSON.stringify(filterAsy(item.children, routes)))
                item.children = filterAsy(item.children, routes);

            }
            return true
        }
    })
}

//创建用户小仓库
let userUserStroe: any = defineStore('User', {
    state: (): UserState => {
        return {
            token: GET_TOKEN(), //存储token
            menuRoutes: constanRoute, //存储菜单数组
            username: "",
            avatar: "",
            buttons: [],
            yellow: "sdfsdf"
        }
    },
    //处理异步和逻辑
    actions: {
        //处理用户登录
        async userLogin(data: loginForm) {
            let result = await reqLogin(data)
            console.log(result)
            if (result.code === 200) {
                //存入pinia|vuex中
                this.token = result.data.token
                SET_TOKEN(result.data.token)
                return 'ok'
            } else {
                console.log(result)
                return Promise.reject(new Error(result.data.message))
            }
        },
        async userInfo() {
            let res = await reqUserInfo();
            if (res.code == 200) {
                this.username = res.data.checkUser.username;
                this.avatar = res.data.checkUser.avatar
                this.buttons = res.data.checkUser.buttons
                //菜单的数据
                let userAsyncRouter = filterAsy(cloneDeep(asyncRouter), res.data.checkUser.routes)
                // 首先当我登录的时候接口会返回一个routes数组会包含路由名字,然后我们前端写的路由会分2种,一种是静态路由,一种是异步路由也称动态路由
                // 然后我会在vuex中写一个方法将获取的routes表与异步路由进行对比,然后在动态生成,我过滤的方法要使用深拷贝来获取这样可以保证每次获取
                // 数据是最新的,从而实现不同的用户登录菜单权限
                // let userAsyncRouter = filterAsy(JSON.parse(JSON.stringify(asyncRouter)), res.data.checkUser.routes)
                this.menuRoutes = [...showroutes, ...userAsyncRouter, ...anyRouter];
                console.log("获取所有的:", router.getRoutes());
                [...userAsyncRouter, ...anyRouter].forEach((route: any) => {
                    router.addRoute(route)
                });
            }
        },
        LoginOut() {
            this.token = ''
            this.username = ''
            this.avatar = ''
            REMOVE_TOKEN()
        }
    },
    getters: {

    }
})


export default userUserStroe;